<template>
    <!-- 博客工作台 -->
      <div class="blogBanch">
        <div class="blogBox">
            <!-- 博客信息 -->
            <div class="blogInfo">
                <span class="ipt1" >标题：<input type="text" v-model="title"></span>
                <span class="ipt2">分类：<input type="text"  v-model="sort"></span>
                <span class="ipt3" >文章封面：</span>
                <span class="ipt4">
                    <input type="file" name="file" accept=".jpg, .jpeg, .png" 
                    @change="uploadAvatar">
                </span>
                <div class="pic" v-show="cover_img"> <img :src="'http://1.12.58.122:3007/'+cover_img" alt=""></div>
            </div>
            <div class="summary">
                <span>简介:<input type="text" v-model="summary"></span>
                <span class="span2">正文</span>
            </div>
             <!-- 博客编辑 -->
            <div class="workBench">
                <mavon-editor v-model="context" @imgAdd="imgAdd"  ref="md" codeStyle="atom-one-dark" ></mavon-editor>
                <!-- 保存草稿 -->
                <span class="save" @click="updateBlog" >
                    <i class="iconfont icon-baocun icon1"></i>
                </span>
                <!-- 发布博客
                <span class="publish" @click="publishBlog">
                    <i class="iconfont icon-fabu icon2"></i>
                </span> -->
            </div>
        </div>
       
      </div>
    </template>
    
    <script>
    export default {
        name:'blog',
        data(){
            return {
                title:'',
                sort:'',
                context:'',
                cover_img:'7a39da00-39bc-11ed-80e8-1bf5006fa095.png',
                summary:'',
                id:'',
                time:'',
                nowtime:''
            }
        },
        methods:{
            // 上传封面
            uploadAvatar(avatar) {
                console.log(avatar.target.files[0])
                let file = avatar.target.files[0]
                let data = new FormData();
                console.log(data)
                data.append("file", file, file.name); 
                data.append('data', 112)
                console.log('123',data.get('file'))
                this.$axios.post('http://1.12.58.122:3007/api/zhutu', data).then((data)=> {
                    console.log(data)
                    this.cover_img = data.data.msg
                }, function(response) {
                    console.log(response)
                })
            },
            // 上传mavonEditor中的图片
            imgAdd(pos,file){    
                // 上传图片
                let data = new FormData()
                data.append("file", file, file.name); 
                data.append('data', 112)
                console.log('123',data.get('file'))
                this.$axios.post('http://1.12.58.122:3007/api/zhutu', data).then((data)=> {
                    console.log(data)
                    // this.$refs.md.$img2Url(pos, data.data.msg) 
                    this.$refs.md.$img2Url(pos, 'http://1.12.58.122:3007' + data.data.msg)
                    // this.$refs.md.$img2Url(pos, 'http://localhost:3007' + data.data.msg)
                }, function(response) {
                    console.log(response)
                })
    
            },
            // 更新博客
            async updateBlog(){
                // 获取当前时间
                let dt = new Date()
                var y = dt.getFullYear()
                var mt = (dt.getMonth() + 1).toString().padStart(2,'0')
                var day = dt.getDate().toString().padStart(2,'0')
                var h = dt.getHours().toString().padStart(2,'0')
                var m = dt.getMinutes().toString().padStart(2,'0')
                var last = y + "-" + mt + "-" + day + " " + h + ":" + m  
                let res = await this.$axios.post('http://1.12.58.122:3007/api/article/updateblog',{
                    title:this.title,sort:this.sort,context:this.context,
                cover_img:this.cover_img,summary:this.summary,time:this.time,nowtime:this.nowtime,last:last,id:this.id
                }) 
                console.log(res)
            },

            // async saveBlog(){
            //     // 调用save接口，向服务器添加草稿
            //     // 保存之前 先把以前的草稿都清了
            //     await this.$axios.post('/api/article/deleteDraft')
            //     let res =await this.$axios.post('/api/article/save',{title:this.title,sort:this.sort,context:this.context,
            //     cover_img:this.cover_img,summary:this.summary})
            //     console.log(res.data)
            // },
            // 发布博客
            // async publishBlog(){
            //     // 获取当前时间
            //     let dt = new Date()
            //     var y = dt.getFullYear()
            //     var mt = (dt.getMonth() + 1).toString().padStart(2,'0')
            //     var day = dt.getDate().toString().padStart(2,'0')
            //     var h = dt.getHours().toString().padStart(2,'0')
            //     var m = dt.getMinutes().toString().padStart(2,'0')
            //     var nowtime = y + "-" + mt + "-" + day + " " + h + ":" + m 
            //     let time = y + "-" + mt + "-" + day
            //     // 调用add函数 向服务器添加博客
            //     let res = await this.$axios.post('/api/article/add',{title:this.title,sort:this.sort,context:this.context,
            //         cover_img:this.cover_img,summary:this.summary,time:time,nowtime:nowtime})
            //     // 发布之后把原来的草稿清空
            //     this.$axios.post('/api/article/deleteDraft')
            //     this.title = ''
            //     this.sort=''
            //     this.context=''
            //     this.cover_img='7a39da00-39bc-11ed-80e8-1bf5006fa095.png'
            //     this.summary = ''
            //     if(res.data.status==0){
            //         this.$router.push({
            //             path:'/admin'
            //         })
            //     }   
            // },      
        },
        // mounted的时候获取原文
        mounted(){
            this.title = this.$route.query.title
            this.sort = this.$route.query.sort
            this.summary = this.$route.query.summary
            this.cover_img = this.$route.query.cover_img
            this.context = this.$route.query.context
            this.id = parseInt(this.$route.query.id)
            this.time = this.$route.query.time
            this.nowtime = this.$route.query.nowtime
        }
    }
    </script>
    
    <style scoped>
    .blogBanch {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: transparent;
    }
    .blogBox {
        position: absolute;
        top: 10%;
        left: 10%;
        background-color: transparent;
        height: 90%;
        width: 80%;
    }
    .blogInfo {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%);
        height: 20%;
        width: 70%;
        background-color:white;
        font-size: 16px;
        text-align: left;
    }
    .ipt1 {
        position: absolute;
        top: 20%;
        left: 5%;
        display: inline-block;
        height: 30%;
        width: 80%;
    }
    .ipt2 {
        position: absolute;
        top: 50%;
        left: 5%;
        display: inline-block;
        height: 30%;
        width: 80%;
    }
    .text {
        position: absolute;
        top: 75%;
        left: 5%;
        font-size: 20px;
    }
    .summary{
        position:absolute;
        top: 20%;
        left: 50%;
        transform: translate(-50%);
        height: 20%;
        width: 70%;
        background-color:white;
        font-size: 16px;
        text-align: left;
        border-top:1px black solid;
    }
    .summary span {
        position: absolute;
        top: 10%;
        left: 5%;
    }
    .summary .span2{
        position: absolute;
        top: 70%;
        left: 5%;
    }
    .workBench{
        position: absolute;
        top: 40%;
        left: 0;
        height: 80%;
        width: 100%;
        background-color:transparent;
    }
    .ipt3 {
        position: absolute;
        top: 20%;
        left: 50%;
        display: inline-block;
        height: 30%;
        width: 80%;
    }
    .ipt4 {
        position: absolute;
        top: 50%;
        left: 50%;
        display: inline-block;
        height: 30%;
        width: 80%;
    }
    .pic {
        position: absolute;
        top: 0;
        right: 0;
        background-color:white;
        width: 10%;
        height: 100%;
        z-index: 1;
    }
    .pic img {
        position: absolute;
        top: 50%;
        height: 50%;
        transform: translate(-50%,-50%);
        width: 100px;
        height: 100px;
        background-size: 100% 100%;
    }
    .save{
        position:fixed;
        top: 28%;
        right: 4%;
        background-color: white;
        height: 5%;
        width: 5%;
        color: blue;
        border-radius: 10px;
    }
    .publish {
        position:fixed;
        top: 34%;
        right: 4%;
        background-color: white;
        height: 5%;
        width: 5%;
        border-radius: 10px;
    }
    .icon1 {
        font-size: 30px;
    }
    .icon2 {
        font-size: 30px;
        color: orange;
    }
    </style>